<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_留言板</title>
    <style>
       .wrap{
           height: 500px;
           width: 700px;
           margin: 150px auto;
           background: url("img/bg.jpg") no-repeat;
       }
        .message_board{
            border-radius: 4px;
            background: #fff;
            margin: 90px 60px auto 60px;
            border: 1px solid black;
        }
        .btn{
            height: 30px;
            width: 80px;
            font: bold 14px '微软雅黑';
            margin-top: 10px;
            margin-right: 60px;
            float: right;
            background-color: #7881ff;
        }
        .wrap ul{
            margin-top: 50px;
            clear: right;
           list-style: none;
            font: normal 15px '微软雅黑';
            color: #333;
        }
        .wrap li{
            margin-bottom: 12px;
            height: 30px;
            width: 600px;
            line-height: 30px;
            /*不加上面一行，字体就不会在行中间，所以设置成与height一样即可*/
            border: 0.5px solid #333;
            border-radius: 8px;
            padding-left: 10px;
            background-color: #d7ffff;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="wrap">
        <textarea name="msg_board" id="msg_board1" cols="78" rows="10" class="message_board"></textarea>
        <button class="btn">提交</button>
        <ul id="msgs"></ul>
    </div>
</div>
<script>
    var msg_board1=document.getElementById('msg_board1');
    var btn=document.querySelector('#container .wrap .btn');
    var msgs=document.getElementById('msgs');
    var counter=0;
    btn.onclick=function () {
        counter+=1;
         console.log(msg_board1.value);
        msgs.innerHTML+='<li>'+msg_board1.value+'</li>';
        if (counter==5){
            msgs.innerHTML+='';
        }
    }

</script>
</body>
</html>